<template>
     <div >
         <nav class="navbar">
            <div class="navBox">
                    <div class="logo">
                        <img src="https://course.myhope365.com/img/logo-text-green.2137bfaa.png" alt="Logo">
                    </div>
                    <ul class="nav-links">
                        <li>
                            <router-link to="/">首页</router-link>
                        </li>
                        <li>
                                <classifyListView></classifyListView>
                        </li>
                        <li><a href="#">教学管理云平台</a></li>
                    </ul>
                    <div class="search-cart">
                        <input type="text" placeholder="搜索课程~">
                        <button class="search-btn">
                            <img src="" alt="">
                        </button>
                    </div>
                    <div class="cart">
                        <router-link to="/shop">
                            <img src="" alt="购物车">
                        </router-link>
                    </div>
                    <button class="login" @click="showModal" v-show="!$store.state.isLogin">登录/注册</button>

                    <!-- 登录注册弹窗 -->
                                            <a-modal v-model="$store.state.isModalShow" @ok="hideModel" :footer="null" style="width: 400px;">
                                                <loginModal></loginModal>
                                            </a-modal>
                                            <a-popover placement="bottom">
                                                    <template slot="content">
                                                        <div class="userApproveItem">
                                                            <router-link to="/personal">个人中心</router-link>
                                                        </div>
                                                        <div class="userApproveItem">
                                                            <router-link to="/personal">我的课程</router-link>
                                                        </div>
                                                        <div class="userApproveItem">
                                                            <router-link to="/personal">我的订单</router-link>
                                                        </div>
                                                        <div class="userApproveItem" @click="userLogout">退出登录</div>
                                                    </template>

                                                    <div class="user-info-box" v-show="$store.state.isLogin">
                                                        <div class="user-avatar"><a-avatar icon="user" :src="$store.state.userInfo.avatarUrl" />
                                                        </div>
                                                        <div class="user-info">
                                                            <div>{{ $store.state.userInfo.nickname }}</div>
                                                            <div>青铜会员</div>
                                                        </div>
                                                    </div>
                                                </a-popover>
            </div>
        </nav>
     </div>
</template>
<script>
import loginModal from '@/components/loginModal.vue'
import classifyListView from '@/components/classifyListView.vue'
export default {
    components: {
        loginModal,
        classifyListView
    },
    methods: {
        showModal(){
            this.$store.commit('changeModalShow', true)
        },
        hideModel(){
            this.$store.commit('changeModalShow', false)
        },
        handleOk() {
            this.$refs.loginModal.validate().then(() => {
                console.log('验证通过');
            }).catch(() => {
                console.log('验证不通过');
            });
        },
        userLogout(){
            this.$store.commit('changeLogin', false)
            this.$store.commit('changeUserInfo', {})
            this.$router.push('/')
        }
    }
}
</script>
<style lang="scss" scoped>
.navbar {
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    .navBox{
        width: 1160px;
        height: 60px;
        margin: auto;
        display: flex;
        align-items: center;
        
    }
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 40px;
    margin-right: 10px;
   
}


.nav-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-right: 200px;
    margin-left: 40px;
}

.nav-links li {
    margin: 0 13px;
}

.nav-links a {
    text-decoration: none;
    color: #333 !important;
    font-size: 16px;
    font-weight: bold;
}

.search-cart {
    display: flex;
    align-items: center;
    border-radius: 20px; /* 圆角 */
    overflow: hidden;
    width: 300px;
    border: #c4c8c8 solid 1px; /* 边框 */;
}

.search-cart input[type="text"] {
    padding: 5px 10px;
    border: none;
    float: left;
    width: 100%;
    margin-bottom: 0;
    text-align: inherit;
    
    &:focus {
        outline: none;
    }
}

.search-btn {
    background-color: rgb(0, 178, 120);
    color: white;
    border: none;
    padding: 5px 12px;
    /* border-radius: 5px; */
    cursor: pointer;
    img{
        margin-right: 5px;
    }
    
}
.cart{
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    margin-left: 20px;
    margin-right: 20px;
}
.cart img {
    cursor: pointer;
    width: 20px;
}

.login {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px 15px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
}
.user-info-box {
    display: flex;

    .user-avatar {
        margin-right: 5px;
    }

    .user-info {
        >div:first-of-type {
            font-size: 14px;
            font-weight: bold;
        }

        >div:nth-of-type(2) {
            color: #ab753f;
            font-weight: bold;
        }
    }
}
.user-info-box {
    display: flex;

    .user-avatar {
        margin-right: 5px;
    }

    .user-info {
        >div:first-of-type {
            font-size: 14px;
            font-weight: bold;
        }

        >div:nth-of-type(2) {
            color: #ab753f;
            font-weight: bold;
        }
    }
}
.userApproveItem {
    color: black !important;
    padding: 5px 10px !important;
}

.userApproveItem a {
    color: black !important;
}

.ant-popover-inner-content {
    padding: 5px !important;
}

.userApproveItem:hover,
.userApproveItem a:hover {
    background-color: rgb(230, 255, 243) !important;
    color: rgb(0, 207, 140) !important;
}
</style>